<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }

        .container::after {
            content: '';
            flex-grow: 9999;
        / / 占据父级剩余更多的空间
        }

        .image-item {
            position: relative;
            margin: 2.5px
        }

        .image-item img {
            position: absolute;
            left: 0;
            top: 0;
            vertical-align: top;
            width: 100%; /*使用width而非max-width可以解决部分图片无法占满容器的问题*/
        }
    </style>
</head>
<body>
<div class="container">
</div>
</body>
<script>
    let page = 1;
    let rows = [];
    let end = false;
    let total = 0;
    const colors = ["27ea80", "3366FF", "ff5473", "df27ea", "31ac76", "ea4563", "31a6a0", "8e7daa", "4fad7b", "f99f13", "f85200", "666666"];

    function getImageData() {
        $.ajax({
            url: 'http://localhost:5000/search',
            type: 'get',
            data: {'page': page},
            success: function (ret) {
                if (page === 1) {
                    total = ret.total;
                }
                rows = [].concat(ret.images);
                render();
            }
        })
    }

    function render() {
        // 求出高的比例在*宽度 = 实际的宽度
        // width:${200/rows[i].height * rows[i].width}px
        for (let i = 0; i < rows.length; i++) {
            let item = rows[i];
            const color = colors[Math.floor(Math.random() * colors.length)];
            $('.container').append(`
            <div class="image-item" style="width:${200 / item.height * item.width}px;
            flex-grow: ${200 / item.height * item.width};background:${'#' + color};">
                <div style="padding-bottom: ${item.height / item.width * 100}%;">
                    <img data-src="${item.url}">
                </div>
            </div>
            `);
        }
        showImages();
    }

    if (page === 1) {
        getImageData();
    }
    // 加载更多
    // 触底距离 = 页面高度 - 可视区高度 - 滚动条距离
    $(window).scroll(function () {
        showImages();
        // 页面高度document.documentElement.scrollHeight || document.body.scrollHeight;
        const pageHeight = $(document).height();
        // 可视区高度,document.documentElement.clientHeight || document.body.clientHeight;
        const viewHeight = $(window).height();
        // 滚动条距离顶部的高度 document.body.scrollTop|| document.documentElement.scrollTop
        const scrollTop = $(window).scrollTop();
        // 触底
        if (pageHeight - viewHeight - scrollTop <= 10 && end === false && page <= total) { // 当数据没有时不发起请求
            end = true;
            setTimeout(() => {
                page += 1;
                getImageData();
                end = false;
            }, 500);
        }
    });
    // 图片懒加载
    // 图片距离可视区距离 - 滚动条距离 < 可视区高度
    function showImages() {
        const viewHeight = $(window).height();
        // 滚动条距离顶部的距离
        const scrollTop = $(window).scrollTop();
        $('.image-item img').each((i, item) => {
            let imgTop = $(item).offset().top;
            // console.log('imgtop:', imgTop, 'viewHeight:', viewHeight, 'scrollTop', scrollTop);
            if (viewHeight - 10 >= imgTop - scrollTop) {
                $(item).attr('src', $(item).data('src'));
            }
        })
    }
</script>
</html>